<template>
  <div class="my_card" v-longpress="deleteNote">
    <div class="my_card_panel" :style="{maxHeight: show ? 'none' : '300px'}">
      <div class="my_card_title van-hairline--bottom">
        <div class="my_card_title_l">
          <div :class="{text_nowrap: !show}">
            <van-tag v-for="(tag, i) in note.tags" :key="i" :color="tagsColor[i % tagsColor.length]" style="margin: 0 5px 5px 0;">{{tag}}</van-tag>
          </div>
        </div>
        <div class="my_card_title_r">
          {{note.createTime | timeFormat2}}
        </div>
      </div>
      <div class="my_card_content" v-html="note.content" @click="toDetail"></div>
    </div>
    <div class="my_card_menu">
      <div class="flex_center views">
        <van-icon name="browsing-history-o" size="18px"/>
        {{note.views}}
      </div>
      <div class="flex_center good" @click="countData(0)">
          <van-icon name="smile" color="#FE4167" class="popIn" v-if="note.isGood" size="18px"/>
          <van-icon name="smile-o" size="18px" v-else/>
        {{note.good}}
      </div>
      <div class="flex_center bad" @click="countData(1)">
        <van-icon :name="note.isBad ? 'good-job' : 'good-job-o'" size="18px"  class="good_job_o"/>
        {{note.bad}}
      </div>
      <div class="flex_center" @click="onShowNote" v-if="!show">
        <van-icon name="enlarge" size="16px"/>
        展开
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'Card',
  props: {
    note: {
      type: Object
    },
    show: {
      type: Boolean,
      default: false
    },
    isAdmin: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      submitIng: false
    }
  },
  computed: {
    ...mapState(['tagsColor'])
  },
  methods:{
    onShowNote(){
      if (!this.note.isViews){
        this.request.updateViews({id: this.note.id})
      }
      this.$emit('onShowNote', this.note);
      this.$set(this.note, 'isViews', true);
    },
    countData(type){
      if (this.note.isGood || this.note.isBad || this.submitIng){
        return
      }
      this.request[['updateGood', 'updateBad'][type]]({id:this.note.id})
        .then(res=>{
          if(res.data === 1) {
            this.$set(this.note, ['isGood', 'isBad'][type], true);
            this.$set(this.note, ['good', 'bad'][type], this.note[['good', 'bad'][type]] + 1);
          } else {
            this.$notify('操作失败');
          }
          this.submitIng = false
        }).catch(()=>{
          this.submitIng = false
        })
    },
    toDetail(){
      if (!this.show){
        if (this.isAdmin) {
          this.$router.push('/admin/notes/edit?id=' + this.note.id)
        }else {
          this.$router.push('/notes/detail/' + this.note.id)
        }
      }
    },
    deleteNote(){
      if (this.isAdmin){
        this.$emit('deleteNote', this.note)
      }
    }
  }
}
</script>

<style scoped lang="less">
  .my_card{
    width: 100%;
    padding: 5px 10px;
    border: 1px solid #f0f0f0;
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    margin-bottom: 10px;
  }
  .my_card_panel{
    flex: 1;
    overflow: hidden;
    .my_card_title{
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
      display: flex;
      position: relative;
      .my_card_title_l{
        flex: 1;
        display: flex;
        align-items: center;
        overflow: hidden;
      }
    }
    .my_card_content{
      padding: 8px;
      line-height: 22px;
      font-size: 14px;
    }
  }
  .my_card_menu{
    padding: 10px 0;
    display: flex;
    border-top: 1px solid #F7F8FA;
    div{
      flex: 1;
    }
    .views{
      color: #a2a2a2;
    }
    .good_job_o{
      transform: rotateZ(180deg)
    }
  }
  .popIn {
    animation: popIn .4s;
  }
  @keyframes popIn {
    0% {
      transform: scale3d(0.5, 0.5, 0.5);
      opacity: 0;
    }
    50% {
      animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }
    100% {
      transform: scale3d(1, 1, 1);
      animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      opacity: 1;
    }
  }
</style>
